<script type="text/javascript">
    $(function() {
        $('li.level0').hover(function(){
            $(this).addClass('current');
            var current = $('.current');
            var position = $(this).position();
            var parentLeft = position.left;
//                alert(parentLeft);
            var navWidth = $('#tabMenu').width();
//            alert(navWidth);
            var parentRight = navWidth - parentLeft;
//            alert(parentRight);
            timers = setTimeout(function(){
                $('.div-sub').hide();
                current.find('.div-sub').show();
                var widthRight = current.find('.div-sub').width();
//                alert(widthRight+','+parentRight);
                var widthDivSub = current.find('.div-sub-content').width() + current.find('.sub_cat_background').width();
//                alert(widthRight+','+widthDivSub);
                if(widthDivSub > widthRight){
                    current.find('.div-sub').css("right", "0px");
                }
                var subLevel2Width = current.find('.div-sub-content2').width();
                if(subLevel2Width == null){
                    current.find('.level11').css("width", "150px");
                }
//                var heightUlLevel0 = current.find('ul.level0').height();
//                var heightUlHighlights = current.find('ul.highlights').height();
//                if(heightUlHighlights < heightUlLevel0){
//                    current.find('ul.highlights').css("height", heightUlLevel0)
//                }
            }, 100)
        }, function(){
            clearTimeout(timers);
            $(this).addClass('current').find('.div-sub').hide();
            $(this).removeClass('current');
        });

    });

</script>
<style type="text/css">
    .div-sub{
        display: none;
        position: absolute;
        overflow: hidden;
        padding: 2px;
        border: solid 1px #dedede;
        background: #fff;
    }
    .div-sub-content{
        float: left;
        padding: 10px;
        position: relative;
    }
    .div-sub-content ul.level11{
        margin: 0;
        float: left;
        position: relative;
        width: 400px;
    }
    .div-sub-content ul.level11 li.level11-1{
        float: left;
        padding: 5px 0px 5px 10px;
        width: 160px;
    }
    .div-sub-content ul.level11 li.level11-1 a{
        color: #FA8600;
    }
    .div-sub-content ul.level11 li.level11-1 .link11{
        font-weight: bold;
        font-size: 14px;
    }
    .div-sub-content ul.level11 li.level11-1 li.level12-1{
        padding: 5px;
    }
    .sub_cat_background{
        float: right;
        position: relative;
        z-index:1000;
    }
</style>
<div id="tabMenu" style="position: relative;">
    <div id="clear"></div>
    <ul>
        <li id="home_icon"><a href="<?php echo $root_page; ?>">&nbsp;</a></li>
        <?php foreach ($aryRootCategory as $key => $value) {?>
        <li class="level0" style="text-align: left;">
            <a class="link10" href="<?php echo $root_page; ?>/danhmuc/<?php echo $value['category_id']; ?>/<?php echo $value['category_name_filter']; ?>.html" ><span><?php echo $value['category_name']; ?></span></a>
                        <?php if($value['category_total_child'] > 0){?>
                        <div class="div-sub">
                            <div class="div-sub-content">
                            <ul class="level11">
                            <?php foreach ($arySubcategory as $key2 => $subLevel1) {?>
                                <?php if ($value['category_id'] == $subLevel1['parent_id']) { ?>
                                <li class="level11-1">
                                    <a class="link11" href="<?php echo $root_page;?>/danhmuc/<?php echo $subLevel1['category_id']; ?>/<?php echo $subLevel1['category_name_filter']; ?>.html"  ><?php echo $subLevel1['category_name']; ?></a>
                                    <?php if($subLevel1['category_total_child'] > 0){?>
                                        <div class="div-sub-content2">
                                            <ul class="level12">
                                            <?php foreach ($arySubCategoryLevel2 as $key3 => $subLevel2) {?>
                                                <?php if($subLevel1['category_id'] == $subLevel2['parent_id']){?>
                                                <li class="level12-1">
                                                    <a  href="<?php echo $root_page; ?>/danhmuc/<?php echo $subLevel2['category_id']; ?>/<?php echo $subLevel2['category_name_filter']; ?>.html" ><?php echo $subLevel2['category_name']; ?></a>
                                                </li>
                                                <?php } ?>
                                            <?php } ?>
                                            </ul>
                                        </div>
                                    <?php } ?>
                                    
                                </li>
                                <?php } ?>
                            <?php } ?>
                                </ul>
                    
                        </div>
                            <div class="sub_cat_background">
                                <img  src="/public/images/upload/small/<?php echo $value['category_small_image'];?>">
                            </div>


            </div>
                        <?php } ?>
                        
        </li>
        <?php } ?>
        <li class="level0">
            <a class="link10" href="<?php echo $root_page; ?>/tintuc/">
                Tin tức
            </a>
        </li>
        
    </ul>
    <div class="clear"></div>
</div>


